<style>

    body {
        background-color: #f4f4f4;
    }

    .select-box {
        display: flex;
        flex-direction: column;
        padding: 16px 0;
        background-color: white;
    }

    .select-item {
        font-size: 15px;
        font-weight: 400;
        color: #4D4D4D;
        padding: 3px 10px;
        background-color: #FFF;
        border-radius: 4px;
        margin-left: 10px;
        cursor: pointer;
    }

    .active-item {
        color: #FFFFFF;
        background-color: #4B5BDE;
    }

    .select {
        width: 120px;
        height: 31px;
        border-color: #D2D6DE;
        margin-right: 10px;
    }

    #distributor {
        height: 31px;
    }

    .search_distributor {
        background-color: #4A5BDD;
        color: white;
        height: 31px;
        line-height: 31px;
        width: 60px;
        text-align: center;
    }

    .all_title{
        text-align: center;
        font-size: 18px;
    }
    .all_num{
        text-align: center;
        font-size: 32px;
    }

    .type-item {
        width: 110px;
        height: 34px;
        line-height: 34px;
        background: #EEF2F2;
        border-radius: 5px;
        margin-right: 20px;
        text-align: center;
        cursor: pointer;
    }

    .type-active {
        color: #6071EB;
        outline: 1px solid #818FEE;
    }
</style>

<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">

<form class="form-horizontal form-commonsearch nice-validator n-default n-bootstrap" novalidate role="form"
      method="POST" action="">
    <div class="select-box" id="search_issuer_performance">
        <div style="display: flex;align-items: center;">
            <div style="color: #838989;margin-left: 20px;">渠道主体</div>
            <div class="select-item distributor_type" :class="currentChannel == index ? 'active-item' : ''" @click="selectChannel(index)"
                 v-for="(item,index) in channelList" :key=index>{{item}}</div>
            <!--            <div style="color: #838989;margin-left: 20px;">年份</div>-->
            <!--            <div style="margin-left: 20px;">-->
            <!--                <el-select size="small" v-model="year" placeholder="请选择合作年份" @change="changeYear">-->
            <!--                    <el-option-->
            <!--                            v-for="(item,index) in yearList"-->
            <!--                            :key="index"-->
            <!--                            :label="item"-->
            <!--                            :value="item">-->
            <!--                    </el-option>-->
            <!--                </el-select>-->
            <!--            </div>-->
                        <div style="color: #838989;margin-left: 20px;">地区</div>
                        <el-cascader style="margin-left: 20px;" size="small" :options="regionOptions" @change="handleChange"
                                     placeholder="请选择地区" :props="props" clearable></el-cascader>
            <div style="color: #838989;margin-left: 20px;">发行人员</div>
            <el-cascader style="margin-left: 20px;" size="small" :options="personOptions" @change="handleChangePerson"
                         placeholder="请选择发行人员" :props="props2" clearable></el-cascader>
            <div style="width: 450px;display: flex;align-items: center; margin-left: 20px">
                <div style="color: #838989;width: 80px;">时间</div>
                <el-date-picker
                        size="small"
                        v-model="date"
                        prefix-icon="el-icon-date"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        align="right"
                        @change="changeDate">
                </el-date-picker>
            </div>
        </div>


    </div>
</form>
<div class="panel panel-default panel-intro">
    <div class="panel panel-default panel-intro" style="background: #FFFFFF;padding-top: 0;padding-bottom: 0;box-shadow: none;">

        <div class="panel-heading" style="background: #FFFFFF;border-bottom: none;">
            {:build_heading(null,FALSE)}
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <div style="display: flex;align-items: center;">
                                <!--<div style="margin-right: 20px;">渠道总数：3</div>-->
                                <ul class="nav nav-tabs" data-field="audit_status">
                                    <li></li>
                                    <li class="type-item type-active" id="all">{:__('All')}</li>
                                    <li class="type-item" id="unapproved">未到账</li>
                                    <li class="type-item" id="reviewed">已到账</li>
                                    <li class="type-item" id="failed">退款</li>
                                </ul>
                            </div>
                            <div style="display: flex;">
                                <input type="text" name="distributor" id="distributor" placeholder="搜索渠道">
                                <div class="search_distributor">
                                    搜索
                                </div>
                            </div>
                        </div>
        </div>
    </div>
    <div style="display: flex;padding: 20px 0 0 20px;font-size: 15px;">
      <p>当前选项下总营收: </p>
      <p id="total"></p>
      <p>，大学营收: </p>
      <p id="college"></p>
      <p >，高中营收: </p>
      <p id="middle"></p>
      <p>，中职营收: </p>
      <p id="zz"></p>
      <p>，机构营收: </p>
      <p id="jg"></p>
      <p>，个体营收: </p>
      <p id="gt"></p>
      <p>，政府营收: </p>
      <p id="zf"></p>
    </div>
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar" style="display: none">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}"><i
                                class="fa fa-refresh" ></i> </a>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap" width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>
